<template>
  <div>
    <el-card>
      <!-- class="project-list-container" -->
      <div>
        <div class="list-h">
          <!-- :disabled="multipleSelection.length === 0" -->
          <el-button
            v-auth="`funds-project-export`"
            type="primary"
            class="add-option"
            @click="exportExcel"
            >导出</el-button
          >
          <el-form
            :inline="true"
            class="demo-form-inline"
            :model="formInline"
            ref="formRef"
            @submit.prevent
          >
            <el-form-item label="项目名称" prop="projectNameLike">
              <el-input
                v-model.trim="formInline.projectNameLike"
                clearable
                class="width-custom120"
              ></el-input>
            </el-form-item>
            <el-form-item label="项目编号" prop="projectCodeLike">
              <el-input
                v-model.trim="formInline.projectCodeLike"
                clearable
                class="width-custom120"
              ></el-input>
            </el-form-item>
            <el-form-item label="创建人" prop="createUserNameLike">
              <el-input
                v-model.trim="formInline.createUserNameLike"
                clearable
                class="width-custom120"
              ></el-input>
            </el-form-item>
            <el-form-item label="项目类型" prop="projectTypeCode">
              <el-select
                v-model="formInline.projectTypeCode"
                filterable
                class="width-custom120"
              >
                <el-option
                  v-for="item in projectTypeArr"
                  :key="item.dicCode"
                  :label="item.dicValue"
                  :value="item.dicCode"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="创建时间" prop="createTime">
              <el-date-picker
                class="width-custom220"
                v-model="state.createTime"
                type="daterange"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="YYYY-MM-DD"
                @change="handleChangeDate"
              />
            </el-form-item>
            <el-form-item>
              <el-button @click="handleReset">重置</el-button>
              <el-button type="primary" @click="handleSearch">查询</el-button>
            </el-form-item>
          </el-form>
        </div>

        <el-skeleton style="height: 50vh" :rows="8" :loading="loading" animated>
          <el-table
            :data="state.tableData"
            border
            style="width: 100%"
            v-loading="loading"
            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
            @selection-change="handleSelectionChange"
          >
            <template #empty>
              <el-empty :image-size="150" description="暂无数据"></el-empty>
            </template>
            <!-- <el-table-column type="selection" width="55" /> -->
            <el-table-column
              type="index"
              label="序号"
              width="60"
            ></el-table-column>

            <el-table-column
              prop="projectCode"
              label="项目编号"
            ></el-table-column>
            <el-table-column
              prop="projectName"
              label="项目名称"
            ></el-table-column>
            <el-table-column
              prop="projectTypeName"
              label="项目类型"
            ></el-table-column>
            <el-table-column
              prop="createUserName"
              label="创建人"
            ></el-table-column>

            <el-table-column
              prop="createTime"
              label="创建时间"
            ></el-table-column>
            <el-table-column
              prop="projectTotalFunds"
              label="项目预算金额"
            ></el-table-column>
            <el-table-column prop="ext5" label="已投入金额"></el-table-column>
            <el-table-column label="操作" width="160" fixed="right">
              <template #default="{ row }">
                <el-button type="text" @click="handleLook(row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-skeleton>
      </div>
      <re-pagination
        :total="total"
        v-show="total > 0"
        v-model:page="formInline.pageNum"
        v-model:limit="formInline.pageSize"
        @pagination="handleSearch"
      />
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { postDictList } from "/@/api/common";
import { getFeeProjectList } from "/@/api/funds";

// import RePagination from "/@/components/RePagination/index.vue";

// import fundsDetail from "./components/fundsDetail.vue";
import { postDownload } from "/@/utils/download";

const router = useRouter();

const formRef = ref<HTMLFormElement | null>(null) as any;
let projectTypeArr = ref([]);
let loading = ref<boolean>(false);
let multipleSelection = ref([]);
let total = ref<number>(0);

let timeValue = ref(null);

let formInline = reactive<any>({
  projectNameLike: "",
  projectCodeLike: "",
  createUserNameLike: "",
  projectTypeCode: "",

  createTimeStrStart: "",
  createTimeStrEnd: "",

  pageSize: 10,
  pageNum: 1
});

let state = reactive({
  tableData: [],
  createTime: null,
  companyInfo: {}
});

// 请求列表表格数据
async function getTableData(obj: object = {}) {
  // 真实请求待添加
  loading.value = true;
  try {
    const { code, data } = await getFeeProjectList(obj);
    if (code === 200) {
      state.tableData = data.list;
      total.value = data.rows;
    }
  } catch (err) {
    console.log(err);
  } finally {
    loading.value = false;
  }
}

const exportExcel = async () => {
  await postDownload(
    `/rdms-admin/rdProject/fees/export`,
    `科研项目经费.xlsx`,
    formInline
  );
};

const handleSelectionChange = val => {
  multipleSelection.value = val;
};

const initProjectTypeList = async () => {
  try {
    const params = {
      dicType: "rd_project_type"
    };
    const { code, data } = await postDictList(params);
    if (code === 200) {
      projectTypeArr.value = data;
    }
  } catch (err) {
    console.log(err);
  }
};
// 清除表单，重置
const handleReset = () => {
  timeValue.value = null;
  handleChangeDate(null);
  formInline.pageNum = 1;
  formRef.value.resetFields();
};

const handleChangeDate = item => {
  if (item) {
    formInline.createTimeStrStart = item[0];
    formInline.createTimeStrEnd = item[1];
  } else {
    formInline.createTimeStrStart = "";
    formInline.createTimeStrEnd = "";
  }
};

// 根据条件进行搜索
const handleSearch = (): void => {
  getTableData(formInline);
};

const handleLook = (row): void => {
  console.log(row);
  router.push({
    path: "/funds/project-funds/detail",
    query: { id: row.id }
  });
};

// const handleEdit = row => {
//   dialogFormVisible.value = true;
//   mode.value = "edit";
//   state.companyInfo = row;
// };

// 请求数据
initProjectTypeList();
getTableData(formInline);
</script>
